<template>
  <div>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary" @click="addBrand">新增</el-button>
      </div>
      <div>
        <el-table
          :data="brandList"
          border
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" fixed="left" />

          <el-table-column
            align="center"
            prop="name"
            label="品牌名称"
            width="150"
          />

          <el-table-column align="center" label="展示状态" :width="180">
            <template slot-scope="scope">
              <p>
                是否展示:
                <el-switch
                  v-model="scope.row.showStatus"
                  size="small"
                  :active-value="1"
                  :inactive-value="0"
                  @change="changeStatus(scope.row)"
                />
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="logo" width="200">
            <template slot-scope="scope">
              <img :src="scope.row.logo" class="pic" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="专区大图" width="200">
            <template slot-scope="scope">
              <img :src="scope.row.bigPic" class="pic" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandStory"
            label="品牌故事"
            width="150"
          />
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="300"
          />
          <el-table-column
            align="center"
            prop="sort"
            label="排序"
            width="150"
          />
          <el-table-column
            align="center"
            prop="productCommentCount"
            label="产品评论数量"
            width="150"
          />
          <el-table-column
            align="center"
            prop="productCount"
            label="产品数量"
            width="150"
          />
          <el-table-column align="center" label="是否品牌制造商" width="150">
            <template slot-scope="scope">
              <p>{{ scope.row.factoryStatus === 1 ? "是" : "不是" }}</p>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="goDel(scope.row)"
                ><span style="color: red">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
       <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog width="65%" title="品牌详情" :visible.sync="open">
      <el-form
        ref="form"
        :rules="rules"
        :inline="true"
        :model="form"
        label-width="150px"
      >
        <el-form-item size="mini" style="width: 45%" prop="name" label="品牌名称">
          <el-input
            v-model="form.name"

            placeholder="品牌名称"
          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="首字母">
          <el-input
            v-model="form.firstLetter"

            placeholder="首字母"
          />
        </el-form-item>

        <el-form-item size="mini" style="width: 45%" label="排序">
          <el-input v-model="form.sort"  placeholder="排序" />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="产品数量">
          <el-input
            v-model="form.productCount"

            placeholder="产品数量"
          />
        </el-form-item>

        <br>
        <el-form-item size="mini" style="width: 45%" label="是否展示">
          <el-switch
            v-model="form.showStatus"
            :active-value="1"
            :inactive-value="0"

          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="是否为品牌制造商">
          <el-switch
            v-model="form.factoryStatus"
            :active-value="1"
            :inactive-value="0"

          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="上传专区大图">
          <el-upload

            :action="uploadUrl"
                  :headers="uploadHeaders"
                  :show-file-list="false"
                  :on-success="addTiImg"
          >
            <img v-if="form.bigPic" :src="form.bigPic" class="pics">
            <i v-else class="el-icon-plus icons" />
          </el-upload>
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="上传Logo">
          <el-upload

            :action="uploadUrl"
                  :headers="uploadHeaders"
                  :show-file-list="false"
                  :on-success="addLogo"
          >
            <img v-if="form.logo" :src="form.logo" class="pics">
            <i v-else class="el-icon-plus icons" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button  type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAllbrand } from "@/api/market";
import{ findBrandByPage,switchShowStatus,delBrand, addBrandList,updateBrand} from "@/api/product"
import mixin from "@/minx/index";
export default {
  props: {},
 mixins: [mixin],
  data() {
    return {
      brandList: [],
      rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }

                ]
            },
            open: false,
            form: {
                detailObj: '',
                bigPic: '',
                logo: '',
                name: '',
                firstLetter: '',
                sort: '',
                productCount: '',
                productCommentCount: '',
                showStatus: 1,
                factoryStatus: 1
            },
            brandInfo:{}
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
      this.brandList = (await findBrandByPage(this.page.currentPage,
          this.page.size)).data.rows;
      this.page.total=( await findBrandByPage(this.page.currentPage,
          this.page.size)).data.total
    },
 handleSizeChange(val) {
            this.page.size = val
            this.page.currentPage = 1
            this.init()
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.init()
        },
        changeStatus(el){
          switchShowStatus({
            id:el.id,
            status: el.showStatus
          }).then(res=>{
           if(res.success){
             this.$message.success('修改状态成功')
             this.init()
           }
          })
        },
        goDel(el){
          this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBrand(el.id).then(res=>{
            if(res.success){
               this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.init()
            }

          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        },
        addBrand(){
          this.open=true
          this.form={}
          this.brandInfo=null
        },
        addTiImg(res){
            // console.log(res)
          if(res.success){
            this.form.bigPic=res.data.fileUrl
            // console.log(this.form)
          }

        },
        addLogo(res){
          if(res.success){
            this.form.logo=res.data.fileUrl
          }
        },
        onSubmit(){
          if(!this.brandInfo){
             addBrandList({
             ...this.form
           }).then(res=>{
           if(res.success){
             this.$message.success('添加品牌成功')
             this.init()
             this.open=false
             this.form={}
           }
          })
          }else{
            updateBrand({...this.form}).then(res=>{
           if(res.success){
             this.$message.success('更新品牌成功')
             this.init()
             this.open=false

             this.form={}
           }
          })
          }


        },
        goEdit(el){
          this.brandInfo=el
          this.open = true
          if(this.brandInfo){
             this.form = el
          }
        }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.pic {
  width: 100px;
  height: 100px;
}
.icons{
  font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.pics{
  width: 178px;
  height: 178px;
}
</style>
